import { getIpList } from '@/services/ipService';
import { getBlackList } from '@/services/ipmanager';
import { Modal, Table } from 'antd';
import { useEffect, useState } from 'react';

const BlackListModal = (props) => {
  const [dataList, setDataList] = useState([]);
  const [selectedRows, setSelectedRows] = useState<any>();
  //总数
  const [total, setTotal] = useState(40);
  //page
  const [page, setPage] = useState(1);
  //pageSize
  const [pageSize, setPageSize] = useState(10);
  //分页
  const [pagination, setPagination] = useState({
    current: page,
    pageSize: pageSize,
    position: ['bottomRight'],
    size: 'small',
    showSizeChanger: true,
    total: total,
  });

  const handleTableChange = (pagination: any) => {
    setPagination({ ...pagination });
    setPage(pagination.current);
    setPageSize(pagination.pageSize);
  };
  const getDataList = async () => {
    const params = {
      page: page,
      pageSize: pageSize,
    };
    const msg = await getIpList(params);
    if (msg.code == '0') {
      setDataList(msg.data.list);
      setPagination({ ...pagination, total: msg.data.total });
    }
  };
  useEffect(() => {
    getDataList();
  }, [page, pageSize]);
  const columms: [any] = [
    {
      title: 'ip',
      align: 'center',
      dataIndex: 'ip',
    },
  ];
  const onSubmit = () => {
    let ipList = [];
    selectedRows.map((item) => ipList.push(item.id + ''));
    props.setBlackList(ipList);
    props.setIsBlackListShow(false);
  };
  return (
    <Modal
      destroyOnClose
      title="添加黑名单"
      open={props.isBlackListShow}
      onCancel={() => props.setIsBlackListShow(false)}
      width={580}
      onOk={() => onSubmit()}
    >
      <Table
        rowKey="id"
        dataSource={dataList}
        columns={columms}
        pagination={pagination}
        onChange={handleTableChange}
        rowSelection={{
          onChange: (_, selectedRows) => {
            setSelectedRows(selectedRows);
          },
          defaultSelectedRowKeys: [...props.blackList],
        }}
      />
    </Modal>
  );
};
export default BlackListModal;
